<template>
	<view class="content font_family">

		<!-- 轮播图 -->
		<view class="swiper_box">
			<u-swiper height='920' :circular='true' :list="detail_msg.images" @change="e => currentNum = e.current"
				@click="click"></u-swiper>
			<!-- 指示器 -->
			<view class="indicator">
				{{ currentNum + 1 }}/{{ detail_msg.images.length }}
			</view>
			<!-- 位置 -->
			<view class="position f_j" v-if="detail_msg.city">
				<image class="icon" src="../../static/index/pt.png" mode=""></image>
				<text>{{detail_msg.city}}</text>
			</view>

		</view>
		<view class="title">
			{{detail_msg.title}}
		</view>
		<view class="article">
			<u-parse :html="detail_msg.content"></u-parse>
		</view>
		<view class="time">
			{{detail_msg.createtime}}发布
		</view>
		<!-- 点赞框 -->
		<view class="like_box">
			<view class="like_left" @click="gousersq('viewohteruser',detail_msg.user_id)">
				<image :src="detail_msg.avatar" v-if="detail_msg.avatar" mode="aspectFill" class="like_icon"></image>
				<image src="@/static/image/heard.png" v-else mode="aspectFill" class="like_icon"></image>
				<view class="like_name">
					{{detail_msg.username}}
				</view>
			</view>
			<view class="like_right">
				<view class="like_item">
					<view class="like_guanzhu_btn" v-if="detail_msg.is_gz==0" @click="gz_btn('1')">
						+关注
					</view>
					<view class="like_guanzhu_btn" v-else="detail_msg.is_gz==1" @click="gz_btn('2')">
						取消关注
					</view>



				</view>
				<view class="like_item" @click="toComment">
					<u-icon name="chat" size="36"></u-icon>
					<view class="">
						评论
					</view>
				</view>
				<view class="like_item">
					<u-icon @click="sc_btn(1)" v-if="detail_msg.is_sc==0" name="heart" size="36"
						color="#628e3c"></u-icon>
					<u-icon @click="sc_btn(2)" v-else name="heart-fill" size="36"></u-icon>
					<view class="">
						点赞
					</view>
				</view>
				<view class="like_item" @click="toFxShow">
					<u-icon name="zhuanfa" size="36"></u-icon>
					<view class="">
						分享
					</view>
				</view>
				<!-- 	<view class="like_item">
					<u-icon name="more-dot-fill" size="36"></u-icon>
					<view class="">
						更多
					</view>
				</view> -->



			</view>
			<!-- 			<view class="btn f_z_b">
	
				<view class="item" @click="toFxShow">
					<u-icon name="zhuanfa" size="36"></u-icon>
				</view>
			</view> -->
		</view>

		<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :oid=query_data.id :tableData="tableData"
			:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @replyFun="replyFun" @deleteFun="deleteFun">
		</CComment>
		<view style="height: 300rpx;"></view>

		<!-- 分享框 -->
		<u-popup border-radius="14" v-model="fx_show" mode="center" width="80%">
			<view class="fx_box">
				<view class="fx_title">
					分享至
				</view>
				<view class="fx_item f">
					<button type="default" open-type="share" style="width: 100%;display: flex;align-items: center;">
						<view class="item f_d f_j" style="width: 100%;display: flex;align-items: center;">
							<image class="img" src="@/static/image/vx.png" mode=""></image>
							<text class="text">微信好友</text>
						</view>
					</button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import { mapState } from 'vuex'
	// import comment from '@/components/comment.vue'
	// import { detail, get_comment, comment_api } from "@/api/index_menu/index.js"
	import CComment from "@/components/cc-comment/cc-comment.vue";
	export default {
		components: {
			CComment
		},
		data() {
			return {
				//登陆人信息
				myInfo: {
					user_id: '', // 用户id
					user_name: '', // 用户名
					user_avatar: '', // 用户头像地址
				},
				// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
				userInfo: {
					user_id: 2, // 用户id
					user_name: "ikun", // 用户名
					user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
				},
				deleteMode: "all", //删除模式
				// 评论总数
				tableTotal: 0,

				tableData: [
					// {
					// 	id: 120, // 评论id
					// 	parent_id: null, // 评论父级的id
					// 	reply_id: null, // 被回复评论的id
					// 	reply_name: null, // 被回复人的名称
					// 	user_id: 2, // 用户id
					// 	user_name: "ikun", // 用户名
					// 	user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
					// 	user_content: "唱,跳,rap,篮球", // 用户评论内容
					// 	is_like: false, // 用户是否点赞
					// 	like_count: 120, // 点赞数统计
					// 	create_time: "2025-02-19 09:16", // 创建时间
					// }

				],
				menuButtonInfo: 0,
				currentNum: 0,
				value: '',
				// 评论列表
				comment: [],
				comment_show: true,
				fx_show: false,
				query_data: {
					id: '',
				},
				dz_sc: {
					option: '',
					type: 3,
					id: ''
				},
				detail_msg: {},
				query_commont: {
					id: '',
					page: 1,
					type: 2
				},

				status: 'loadmore',
			};
		},
		computed: {},
		onLoad(e) {

			// #ifdef MP-WEIXIN
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect().top
			// #endif
			// #ifdef H5
			this.menuButtonInfo = 20
			// #endif
			this.query_data.id = e.id
			this.dz_sc.id = e.id
			this.query_commont.id = e.id
			console.log('ee111e', this.query_data.id)

			this.get_detail(e.id)
			this.myInfo.user_id = this.vuex_user.id
			this.myInfo.user_name = this.vuex_user.username
			this.myInfo.user_avatar = this.vuex_user.avatar
			// this.get_comment_list()
		},
		onShareAppMessage(e) {
			return {
				title: this.detail_msg.title,
				path: `sub_pages/indexDetail/indexDetail?id=${this.query_data.id}`,
				imageUrl: this.detail_msg.images[0],
				desc: '快来跟我一起吧'
			}
		},
		onShareTimeline() {
			return {
				title: this.detail_msg.title,
				path: `sub_pages/indexDetail/indexDetail?id=${this.query_data.id}`,
				imageUrl: this.detail_msg.images[0],
				desc: '快来跟我一起吧'
			}
		},
		// onReachBottom() {

		// },
		methods: {

			toComment() {
				this.$refs.ccRef.newCommentFun()
			},
			// 作者主页
			// go_author() {
			// 	uni.navigateTo({
			// 		url: '/pagesA/index_menu/author'
			// 	})
			// },
			replyFun({
				params
			}, callback) {
				console.log("replyFun", params);
				// 当请求成功, 调用callback执行评论插入;
				// Demo如下:
				// axios.post("http://xxx/reply", { ...params }).then((res) => {
				//   if (res.code === 0) {
				//     callback(res);
				//   }
				// });
				const res = {
					id: Math.random()
				}; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
				setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
			},
			deleteFun({
				params,
				mode
			}, callback) {
				console.log("deleteFun111", {
					params,
					mode
				});

				// console.log("deleteFun111222",params[0])

				this.$api.deluerArticleliuyan({
					id: params[0]
				}).then((res) => {
					console.log(res)
					if (res.code) {

					} else {

					}
					// this.detail_msg = res.data; 
					// this.get_uerArticleliuyanList(id);

				});


				switch (mode) {
					case "bind":
						// 逻辑: 调用接口进行评论内容修改 update
						setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
						break;
					case "only":
						// 逻辑: 调用接口删除一个评论 delete
						setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
						break;
					default:
						// all
						// 逻辑: 调用接口删除多个评论 [delete]
						setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
						break;
				}
			},
			toFxShow() {
				this.fx_show = true
			},
			show_comment_box() {
				console.log(this.vuex_openid)
				if (this.vuex_openid) {
					this.comment_show = true
				} else {
					uni.navigateTo({
						url: '/pages/login/mobilelogin'
					})
					return
				}

			},

			sc_btn(type) {
				console.log(type)
				let flag = "";
				if (type == 1) {
					flag = "sc";
					this.detail_msg.is_sc = 1

				} else {
					this.detail_msg.is_sc = 0
				}

				this.$api.uerArticleSc({
					oid: this.detail_msg.id,
					is_sc: this.detail_msg.is_sc,

				}).then((res) => {
					console.log(res)
					if (res.code) {

					} else {

					}
					// this.detail_msg = res.data; 
					// this.get_uerArticleliuyanList(id);

				});
				this.$forceUpdate()
			},

			// 关注
			gz_btn(type) {
				console.log(type)
				let flag = "";
				if (type == 1) {
					flag = "sc";
					this.detail_msg.is_gz = 1

				} else {
					this.detail_msg.is_gz = 0
				}

				this.$api.uerArticleGz({
					articleuid: this.detail_msg.user_id,
					is_gz: this.detail_msg.is_gz,

				}).then((res) => {
					console.log(res)
					if (res.code) {

					} else {

					}
					// this.detail_msg = res.data; 
					// this.get_uerArticleliuyanList(id);

				});
				this.$forceUpdate()
			},

            gousersq(flag,uid) {
				uni.navigateTo({
					url: '/sub_pages/myPublish/myPublish?flag='+flag+'&publishuid='+uid
				})

			},


			fx_close() {
				this.fx_show = false
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取详情
			get_detail(id) {
				this.$api.getuserArticledetail({
					id: id
				}).then((res) => {
					console.log(res)
					this.detail_msg = res.data;
					this.get_uerArticleliuyanList(id);

				});
			},

			// 获取详情
			get_uerArticleliuyanList(id) {
				this.$api.uerArticleliuyanList({
					oid: id
				}).then((res) => {
					// 
					this.tableData = res.data.data;
					console.log(this.tableData)
					// this.tableData= res.data.liuyanlist;


				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 30rpx;

		.user_top {
			padding-left: 46rpx;
			padding-bottom: 20rpx;

			.icon {
				width: 18rpx;
				height: 36rpx;
				margin-right: 68rpx;
			}

			.name {
				margin-left: 22rpx;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.btn {
				margin-left: 30rpx;
				background: #FFE706;
				border-radius: 622rpx 622rpx 622rpx 622rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
				font-style: normal;
				text-transform: none;
				padding: 4rpx 24rpx;
			}

			.is_gz {
				background-color: #ffffff;
			}
		}

		.swiper_box {
			padding: 20rpx 30rpx;
			position: relative;

			.indicator {
				position: absolute;
				top: 50rpx;
				right: 50rpx;
				padding: 4rpx 30rpx;
				background: rgba(35, 35, 35, 0.1);
				border-radius: 1300rpx 1300rpx 1300rpx 1300rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.position {
				position: absolute;
				left: 50rpx;
				bottom: 50rpx;
				padding: 10rpx 22rpx;
				background: rgba(0, 0, 0, 0.36);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				font-style: normal;
				text-transform: none;

				.icon {
					width: 24rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}

			.like_tag {
				position: absolute;
				right: 50rpx;
				bottom: 50rpx;
				width: 46rpx;
				height: 46rpx;
				background: rgba(35, 35, 35, 0.1);
				border-radius: 50%;

				.like_icon {
					width: 30rpx;
					height: 28rpx;
				}
			}
		}

		.title {
			font-weight: 400;
			font-size: 32rpx;
			color: #3D3D3D;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding: 0rpx 30rpx;
		}

		.article {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding: 0rpx 30rpx;
			margin-top: 15rpx;
		}

		.time {
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding: 0rpx 30rpx;
			margin-top: 15rpx;
		}

		.like_box {
			padding: 20rpx 30rpx 40rpx 30rpx;
			width: 100%;
			background-color: #f7faeb;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.like_left {
				display: flex;
				align-items: center;

				.like_icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					padding: 10rpx;
				}

				.like_name {
					font-weight: bold;
					font-size: 28rpx;
				}
			}

			.like_right {
				display: flex;
				align-items: center;

				.like_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 14rpx;
				}

				.like_guanzhu_btn {
					background-color: #628e3c;
					color: #fff;
					border-radius: 50rpx;
					padding: 4rpx 18rpx;
					font-size: 24rpx;
				}
			}


			.btn {

				.item {
					.icon {
						width: 26rpx;
						height: 24rpx;
					}

					.icon1 {
						width: 30rpx;
						height: 26rpx;
					}

					.num {
						margin-left: 10rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #3D3D3D;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}

		.comment {
			padding: 0rpx 30rpx;
			margin-top: 40rpx;

			.comment_title {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.user {
				margin-top: 30rpx;
				margin-bottom: 20rpx;

				.ipt_box {
					padding: 0rpx 20rpx;
					flex: 1;
					margin-left: 20rpx;
					height: 54rpx;
					background: #FFFFFF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					.icon {
						width: 26rpx;
						height: 22rpx;
						margin-right: 20rpx;
					}

					.ipt_text {
						font-weight: 400;
						font-size: 24rpx;
						color: #9A9FA1;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.no_comment {
				margin-top: 30rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.more {
				padding: 0rpx 180rpx;
			}
		}

		.tj {
			padding: 0rpx 30rpx;
			margin-top: 30rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #232323;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.list {
			flex-wrap: wrap;
			padding: 0rpx 30rpx;
			margin-top: 30rpx;
		}

		.comment_box {
			width: 100%;
			height: 696rpx;
			padding: 56rpx 36rpx;
			padding-bottom: 0rpx;
			box-sizing: border-box;
		}

		.bottom {
			margin-top: 20rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom) /2);

			.ipt_box {
				padding: 8rpx 20rpx;
				width: 616rpx;
				height: 54rpx;
				background: #F8F9FC;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				box-sizing: border-box;

				.img {
					width: 26rpx;
					height: 22rpx;
					margin-right: 20rpx;
				}
			}
		}

		.fx_box {
			padding: 34rpx 40rpx;

			.fx_title {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.fx_item {
				margin-top: 38rpx;
				// padding-bottom: 34rpx;
				// border-bottom: 1rpx solid #DFDFDF;

				::v-deep button:after {
					border: none !important;
				}

				::v-deep button {
					background: none !important;
					margin: 0;
					padding: 0;
				}

				.item {
					margin-right: 40rpx;

					.img {
						width: 58rpx;
						height: 58rpx;
					}

					.text {
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 10rpx;
					}
				}
			}

			.fx_btn {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				padding: 32rpx 0rpx;
			}
		}
	}

	.f_z_b {
		display: flex;
		justify-content: space-between;
	}
</style>